<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>其他信息</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/loading.css">
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">
        <!-- Modal 企业风险信息详情 -->
        <div class="modal fade" id="myModal-de">
            <div class="modal-dialog" style="width:1120px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">企业风险信息详情</h4>
                    </div>
                    <div class="modal-body">
                        <div class="space-box">
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">企业</a>
                                </div>
                                <div class="right-txt">
                                    <p>企业名称：<span>浙江普康生物技术有限公司</span></p>
                                    <p>许可证编号：XXXXXXXXXXXX</p>
                                    <p>发证日期：2019-07-1</p>
                                    <p>有效期至：2019-07-1</p>
                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">GSP</a>
                                </div>
                                <div class="right-txt">
                                    <p>企业名称：<span>浙江普康生物技术有限公司</span></p>
                                    <p>许可证编号：XXXXXXXXXXXX</p>
                                    <p>发证日期：2019-07-1</p>
                                    <p>有效期至：2019-07-1</p>
                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">信源
                                    </a>
                                </div>
                                <div class="right-txt">
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>违法行为</td>
                                                        <td>性质</td>

                                                    </tr>
                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>时间</td>
                                                        <td>处罚内容</td>
                                                        <td>罚款金额</td>


                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>
                                                                想
                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>缺陷条款</td>
                                                        <td>缺陷内容</td>


                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">模型</a>
                                </div>
                                <div class="right-txt">
                                    <!-- <textarea class="form-control" disabled style="height: 104px;"></textarea> -->

                                    <textarea class="form-control" style="height: 104px;"></textarea>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Modal 预警信息列表 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">预警信息列表</h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col />

                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>预警事项内容</td>


                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col />

                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td class="eli">
                                                XXX医药公司GSP证书临期

                                            </td>

                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td class="eli">
                                                双价肾综合征出血热灭活疫苗（Vero细胞）

                                            </td>

                                        </tr>

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="global-content">
            <header class="header"> </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./ltcp.html" class="ltcp ">
                            <span class="badge">2</span>

                            流通产品
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./jyqy.html" class="jyqy ">
                            <span class="badge">2</span>

                            经营企业
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:;" class="qtxx on">
                            <span class="badge">2</span>

                            其他信息
                        </a>
                    </div>

                </nav>
                <div class="content-box">
                    <div class="jyqy-wrapper qtxx-wrapper">
                        <div class="jyqy-left">
                            <div class="jyqy-left-item1">
                                <div id="map" class="map-box-top"></div>
                                <div class="a-tit">各类型监测提醒数量</div>

                                <div class="count-list">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="box-txt on">
                                                        <div class="txt">
                                                            产品<br />
                                                            <span>233</span>
                                                        </div>

                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="box-txt">
                                                        <div class="txt">
                                                            批发<br />
                                                            <span>233</span>
                                                        </div>

                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="box-txt">
                                                        <div class="txt">
                                                            零售<br />
                                                            <span>2,330</span>
                                                        </div>

                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="pie-tit">监测提醒类型占比</div>
                                <div id="main-pie1" class="pie-box"></div>

                            </div>
                            <div class="jyqy-left-item2">
                                <div class="a-tit">提醒及处置情况</div>
                                <div id="main-bar1" style="width: 100%;height:270px"></div>
                            </div>
                        </div>
                        <div class="jyqy-right">
                            <div class="a-tit">最新企业监测提醒</div>
                            <div class="jyqy-table-list scroll-container">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="marquee-box">
                                <marquee id="affiche" align="left" behavior="scroll" vspace="20" loop="-1"
                                    scrollamount="10" scrolldelay="100" onMouseOut="this.start()"
                                    onMouseOver="this.stop()">
                                    预处置风险：华东医药集团有限公司风险指数超限</marquee>
                            </div>
                            <div class="line"></div>
                            <div class="r-bottom-box">
                                <div class="r-bottom-box-nav" id="r-bottom-box-nav">
                                    <span>信源</span>
                                    <span>模型</span>
                                    <span>企业</span>
                                    <span>产品</span>
                                    <span class="on">处置</span>
                                </div>
                                <div class="r-bottom-box-con">
                                    <table>
                                        <colgroup>
                                            <col style="width:114px">
                                            <col>
                                        </colgroup>
                                        <tbody>

                                            <tr>
                                                <td>会商确定类型：</td>
                                                <td>
                                                    <input type="text" value="预警处置" class="form-control">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">会商意见：</td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <textarea class="form-control" name="" style="height:174px;"
                                                        id=""></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="text-align: right">
                                                    <button class="a-btn">提交</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/loading.js"></script>

    <script>
        $(function () {
            $('.count-list').on('click', '.box-txt', function () {
                $('.count-list .box-txt').removeClass('onf')
                $(this).addClass('on')
            })

            $('#r-bottom-box-nav').on('click', 'span', function () {
                $(this).addClass('on').siblings().removeClass('on')
                $('#myModal-de').modal();
            })
            // 加载显示测试  不需要可删除

            function loading1() {
                $('body').loading({ //加载区域元素id或则类名元素名 可以上任何元素类名id
                    loadingWidth: 240,
                    title: '请稍等!',
                    name: 'test', //
                    discription: '正在努力加载中...',
                    direction: 'column',
                    type: 'origin',
                    // originBg:'#71EA71',
                    originDivWidth: 40,
                    originDivHeight: 40,
                    originWidth: 6,
                    originHeight: 6,
                    smallLoading: false,
                    // loadingMaskBg: 'rgba(0,0,0,0.2)',
                    titleColor: '#52fffd',
                    // loadingBg: '#312923',
                    loadingMaskBg: 'rgba(22,22,22,0.3)'
                });
                setTimeout(function () {
                    removeLoading('test');
                    // 关闭加载
                }, 500);
            }
            loading1()
            shwoPie()
            showmap()

            chartBar1({
                id: 'main-bar1',
                lableList: ['杭州', '宁波', '温州', '湖州', '嘉兴', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
                legendData: ['预警数量', '处置数量'],
                dataList: [
                    [1, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [3, 60, 130, 1, 20, 160, 1, 20, 160, 1, 20]

                ]

            })




        })

        function chartBar1(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据


            var option = {
                color: ['#FF9722', '#05D187', '#2289F2', '#52FFFD', '#BCEB4D', '#F5A623', '#E75656', '#5C13FE',
                    '#669F2B', '#AA671D', '#2289F2', '#E82177'
                ],
                grid: {
                    left: 80,
                    top: 100,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '单位：次',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10,
                    top: 40
                },
                legend: {
                    data: cfg.legendData,
                    top: 30,
                    x: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: cfg.lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: cfg.dataList.map(function (item, index) {
                    var a = {
                        name: cfg.legendData[index],
                        type: 'bar',
                        data: cfg.dataList[index],
                        // symbol: 'circle', //

                    }
                    return a

                })

            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }

        function shwoPie() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main-pie1'));
            // 指定图表的配置项和数据


            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     right: 10,
                //     top: 122,
                //     data: ['疫苗', '血液制品', '生物工程产品', '大容量注射剂', '小容量注射剂', '小容量注射剂（含激素类）', '粉针剂', '冻干粉针剂', '原料药',
                //         '精神药品', '药品类易制毒化学品', '医疗用毒性药品', '中药饮片'
                //     ],
                //     textStyle: {
                //         fontSize: 16,
                //         color: '#fff'

                //     }
                // },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['30%', '60%'],
                    center: ['50%', '63%'],
                    color: ['#05D187', '#0099FF', '#FF9722', '#EB3432', '#AF13FE', '#9233E7',
                        '#E12770', '#2289F2', '#FDFD64', '#98E33D', '#9C1919', '#6380C7', '#C36512'
                    ],
                    data: [{
                            value: 335,
                            name: '基本情况'
                        },
                        {
                            value: 310,
                            name: '日常检查'
                        },
                        {
                            value: 234,
                            name: '抽检'
                        },
                        {
                            value: 135,
                            name: '不良反应'
                        }


                    ],
                    label: {
                        normal: {
                            show: true,

                            formatter: "{b} \n{d}%",
                            textStyle: {
                                fontSize: 16
                            }
                        }

                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            $(window).on('resize', function () {
                myChart.resize();

            })
        }

        function showmap() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map'));
            // 指定图表的配置项和数据


            /**
             此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

             默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
             当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

             http://echarts.baidu.com/option.html#series-map.geoIndex

             并且加了pin气泡图标以示数值大小
             */

            myChart.showLoading();
            $.getJSON('../src/js/zj.json', function (geoJson) {
                echarts.registerMap('zj', geoJson);
                myChart.hideLoading();
                var option = {
                    geo: {
                        show: true,
                        map: 'zj',
                        left: 700,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: '#EE6363',
                                borderWidth: 5,
                                borderColor: '#00C0FF',
                                shadowColor: '#00C0FF', // 边框阴影颜色
                                shadowBlur: 50
                            }
                        }
                    },
                    legend: {

                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.data.name.concat('<br/>').concat('预报警数量:' + params
                                .data.value)

                        },
                        textStyle: {
                            fontSize: '100%'
                        }
                    },

                    visualMap: {
                        show: false,
                        min: 0,
                        // max: 500,
                        inRange: {
                            color: ['#0A0D49', '#025ED4']
                        },

                    },


                    series: [{
                            type: 'map',
                            map: 'zj',
                            left: 700,

                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '100%'
                                    }
                                },
                            },
                            roam: false,
                            animation: false,
                            itemStyle: {
                                normal: {
                                    color: '#05C3F9',
                                    areaColor: '#031525',
                                    shadowBlur: 2,
                                    borderColor: '#00C0FF',
                                    shadowColor: '#05C3F9',

                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            data: [{
                                name: '杭州市',
                                value: 1232

                            }]
                        }

                    ]
                };
                myChart.setOption(option);
                myChart.on('click', function (params) {
                    $('#myModal').modal({
                        keyboard: false
                    })
                })
            });

            // 使用刚指定的配置项和数据显示图表。


        }
    </script>

</body>

</html>